function fontSize() {
	var _html = document.getElementsByTagName("html")[0];
	_html.style.fontSize = "100px";
	var w = document.documentElement.clientWidth;
	_html.style.fontSize = w / 7.5 + "px";
};
window.onresize = fontSize;
var app = new Vue({
	el: '#app',
	data: {
		score:0,//得分
		gameMsg:[//游戏信息
			[
				{
					num:0,
					color:"#CEC2B5",
					index:0,
				},{
					num:0,
					color:"#CEC2B5",
					index:1,
				},{
					num:0,
					color:"#CEC2B5",
					index:2,
				},{
					num:0,
					color:"#CEC2B5",
					index:3,
				},
			],[
				{
					num:0,
					color:"#CEC2B5",
					index:4,
				},{
					num:0,
					color:"#CEC2B5",
					index:5,
				},{
					num:0,
					color:"#CEC2B5",
					index:6,
				},{
					num:0,
					color:"#CEC2B5",
					index:7,
				},
			],[
				{
					num:0,
					color:"#CEC2B5",
					index:8,
				},
				{
					num:0,
					color:"#CEC2B5",
					index:9,
				},
				{
					num:0,
					color:"#CEC2B5",
					index:10,
				},
				{
					num:0,
					color:"#CEC2B5",
					index:11,
				},
			],[
				{
					num:0,
					color:"#CEC2B5",
					index:12,
				},
				{
					num:0,
					color:"#CEC2B5",
					index:13,
				},
				{
					num:0,
					color:"#CEC2B5",
					index:14,
				},
				{
					num:0,
					color:"#CEC2B5",
					index:15,
				},
			],
		],
		gameMsgBei:[],//初始化的数组
		gameMsgLast:[],//上一次
		gameMsgFile:null,//存档
		nullArr:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],//剩余空位的集合
		isOverFlag:false,//是否结束
		tip:"",
		tipClass:{
			FadeInT:true,
			FadeOutT:false,
		},
		color:["#CEC2B5","#E4DCD1","#E6D7C4","#E8B287","#E9A077","#EA8C73","#E5C876","#E4C25A","#E2C14E"],
	},
	mounted() {
		fontSize();
		this.gameMsgBei = JSON.parse(JSON.stringify(this.gameMsg));//空
		this.gameMsgFile = localStorage.getItem("gameMsgFile");//读档
		this.keyUp();
		var str = localStorage.getItem("lastMgs");
		if(str){
			this.gameMsg = JSON.parse(str);
			this.allScore();
		}else{
			this.random();
			this.random();
		};	
	},
	filters: {
		zero(num){
			return num ? num : undefined;
		},	
	},
	methods: {
		allScore(){//计算总分数
			var score = 0;
			var nullArr = [];
			this.gameMsg.forEach((item) => {
				item.forEach((val) => {
					score += val.num;
					val.num || nullArr.push(val.index);
				});
			});
			this.score = score;
			this.nullArr = nullArr;
		},
		random(){//随机生成2,
			this.nullArrChange();
			// var createNum = 2;//生成2的数量
			// (this.nullArr.length == 1) && (createNum = 1);
			// var indexArr = this.getChange(createNum);
			var random = ~~(Math.random() * this.nullArr.length);
			var index = this.nullArr[random];
			this.change(index);
		},
		isOver(){//游戏是否结束
			for(var i = 0; i < this.gameMsg.length; i++ ){
				for(var j = 0; j < this.gameMsg[i].length; j++ ){
					if(this.gameMsg[i][j].num == 0){//如果当前元素是0
						return false;//返回false
					}else if(j < this.gameMsg[i].length-1 && this.gameMsg[i][j].num == this.gameMsg[i][j+1].num){
						//否则，如果j<3且当前元素等于右侧元素
						return false;//返回false
					}else if(i < this.gameMsg.length-1 && this.gameMsg[i][j].num == this.gameMsg[i+1][j].num){
						//否则，如果r<3且当前元素等于下方元素
						return false;//返回false
					}
				}//(遍历结束)
			}//返回true
			return true;
		},
		// getChange(createNum){//获取改变的数据索引
		// 	var indexArr = [];
		// 	var that = this; 
		// 	function getIndexArr(createNum){
		// 		var arr = [];
		// 		for(var i = 0; i < createNum; i++ ){
		// 			var index = ~~(Math.random() * that.nullArr.length);//0-this.nullArr.length 的随机数
		// 			arr.push(that.nullArr[index]);
		// 		};
		// 		// 处理生成数组
		// 		((arr.length == 2) && (arr[0] == arr[1])) ? getIndexArr(createNum) : (indexArr = arr);
		// 	};
		// 	getIndexArr(createNum);
		// 	return indexArr;
		// },
		change(index){//改变游戏数据
			this.gameMsg.forEach((item) => {
				item.forEach((val) => {
					(val.index == index) && (val.num = 2);
					(val.index == index) && (val.color = "#E4DCD1");
				});
			});
			this.allScore();
			var str = JSON.stringify(this.gameMsg);
			localStorage.setItem("lastMgs",str);
		},
		left(){//左
			return this.rowChange(true);
		},
		right(){//右
			return this.rowChange(false);
		},
		up(){//上
			return this.listChange(true);
		},
		down(){//下
			return this.listChange(false);
		},
		rowChange(flag){
			var that = this;
			var startStr = JSON.stringify(this.gameMsg);
			this.gameMsg.forEach((val,index) => {
				var arr = [];
				val.forEach((item,key) => {//收集数据
					arr.push(item.num);
				});
				arr = that.getSort(arr,flag);
				val.forEach((item,key) => {//改变数据
					val[key].num = arr[key];
					var num = Math.log2(arr[key]);
					val[key].color = that.color[num%9];
					// (arr[key] > 0) && (val[key].classFlag = true);
				});
			});
			var endStr = JSON.stringify(this.gameMsg);
			return (startStr == endStr) ? false : true;
		},
		listChange(flag){
			var that = this;
			var startStr = JSON.stringify(this.gameMsg);
			for(var i = 0; i < this.gameMsg.length; i++ ){
				var arr = [];
				for(var j = 0; j < this.gameMsg[i].length; j++){
					arr.push(this.gameMsg[j][i].num);
				};
				arr = this.getSort(arr,flag);
				for(var j = 0; j < this.gameMsg[i].length; j++){
					this.gameMsg[j][i].num = arr[j];
					var num = Math.log2(arr[j]);
					this.gameMsg[j][i].color = that.color[num%9];
					// (arr[j] > 0) && (this.gameMsg[j][i].classFlag = true);
				};
			};
			var endStr = JSON.stringify(this.gameMsg);
			return (startStr == endStr) ? false : true;
		},
		getSort(arr,leftFlag){//核心逻辑
			leftFlag && arr.reverse();//倒序
			for (var i = 0; i < arr.length; i++){
				if(arr[i] == 0 && i>0){
					arr.splice(i,1);
					arr.unshift(0);
				};
			};
			for (var i = 0; i < arr.length; i++){
				if((arr[i] == arr[i+1]) && (arr[i+2] == arr[i+3]) && (arr[i+1] == arr[i+2])){//4个相同
					arr = [arr[i]*2,arr[i]*2,0,0];
				}else{
					if(arr[i] == arr[i+1]){
						if(arr[i+1] == arr[i+2]){
							arr[i+2] = arr[i+2]*2;
							arr[i+1] = 0;
							i+=2;
						}else{
							arr[i+1] = arr[i+1]*2;
							arr[i] = 0;
							i++;	
						};
					};
				};
			};
			for (var i = 0; i < arr.length; i++){
				if(arr[i] == 0 && i>0){
					arr.splice(i,1);
					arr.unshift(0);
				};
			};
			leftFlag && arr.reverse();//倒序
			return arr;
		},
		nullArrChange(){//重新排列
			var arr = [];
			this.gameMsg.forEach((val)=>{
				val.forEach((item)=>{
					(item.num == 0) && arr.push(item.index);
				})
			});
			// console.log(arr);
			this.nullArr = arr;
		},
		keyUp(){
			var that = this;
			document.onkeydown = function(e){
				that.gameMsgLast = JSON.parse(JSON.stringify(that.gameMsg));//上一次的
	            var key = window.event.keyCode;
	            var flag = true;
	            if(key == 37){ //左
	            	flag = that.left();
	            } else if (key == 38) {//上
	            	flag = that.up();
	            } else if (key == 39) {//右
	            	flag = that.right();
	            } else if (key == 40) {//下
	            	flag = that.down();
	            } else {};
	            that.isOverFlag = that.isOver();
	            (!that.isOverFlag && flag) && that.random();
	        };
		},
		again(){
			this.gameMsg = JSON.parse(JSON.stringify(this.gameMsgBei));//空
			this.gameMsgLast = [];//情空撤销
			this.isOverFlag = false;
			this.score = 0;
			this.random();
			this.random();
		},
		vuetouch(s,e){
			this.gameMsgLast = JSON.parse(JSON.stringify(this.gameMsg));//上一次的
			var flag = true;
			 if(s.name == 'left'){ //左
            	flag = this.left();
            } else if (s.name == 'up') {//上
            	flag = this.up();
            } else if (s.name == 'right') {//右
            	flag = this.right();
            } else if (s.name == 'down') {//下
            	flag = this.down();
            } else {};
            this.isOverFlag = this.isOver();
            (!this.isOverFlag && flag) && this.random();
		},
		revocation(){//撤销
			if(this.gameMsgLast.length){
				this.gameMsg = JSON.parse(JSON.stringify(this.gameMsgLast));
				this.gameMsgLast.length = 0;
				this.tip="撤销成功";
			};
		},
		sure(){//确定
			this.tipClass = {
				FadeInT:false,
				FadeOutT:true,
			};
			this.tip = "";
		},
		fileRead(){//读档
			if(this.gameMsgFile){
				this.gameMsg = JSON.parse(JSON.stringify(this.gameMsgFile));
				this.tip = "读档成功";
			}else{
				this.tip = "暂无存档";
			}
		},
		fileOn(){//存档
			this.gameMsgFile = JSON.parse(JSON.stringify(this.gameMsg));
			localStorage.setItem("gameMsgFile",JSON.stringify(this.gameMsg));
			this.tip = "存档成功";
		},
	},
	watch:{
		tip(){
			this.tip && (this.tipClass = {
				FadeInT:true,
				FadeOutT:false,
			});
		}
	}
});
